<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小例子：实现日历图</title>
    <!-- 引入 echarts.js -->
    <script src="cjj/echarts.js"></script>
    <!--<script src="cjj/jq.js"></script>-->
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">


var myChart = echarts.init(document.getElementById('main'));

// 模拟数据
function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate(year + '-12-31');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time <= end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
        ]);
    }
    return data;
}
var option = {
    visualMap: {
        show: false,
        min: 0,
        max: 10000
    },
    calendar: {
        range: '2017'
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData(2017)
    }
};
myChart.setOption(option);


</script>
</body>
</html>